<!DOCTYPE html>
<html>

<head>
    <title>Ch04-04 Number Adding Machine</title>
  </head>

<body>
<h1>A very simple Adding Machine</h1>
<p>It can add two numbers together.</p>
<p>
  First number: <input type="number" id="no1Text" value="0">
</p>
<p>
  Second number: <input type="number" id="no2Text" value="0">
</p>
<p>
  <button onclick="doAddition();">Add numbers</button>
</p>

<p id="resultParagraph">
  Result displayed here.
</p>

  <script>
function doAddition() {

  var no1Element = document.getElementById("no1Text");
  var no1Text = no1Element.value;
  var no1Number = Number(no1Text);
  
  var no2Element = document.getElementById("no2Text");
  var no2Text = no2Element.value;
  var no2Number = Number(no2Text);

var result = no1Number + no2Number;

var resultElement = document.getElementById("resultParagraph");
resultElement.innerText = result;
}
  </script>
</body>
</html>
